<template>
  <!-- <div class="root">
    <el-button @click="flex = flex === 1 ? 2 : 1">flex22 </el-button>
    <el-button @click="flex = flex === 1 ? 2 : 1">dialog Open </el-button>
    <div class="card" :style="{ flex: flex }">
      <div class="box"></div>
    </div>
    <div class="card"></div>
  </div> -->
  <op-button @buttonClick="buttonClick">opDialog</op-button>
  <el-button @click="click">opDialog1111</el-button>
  <op-dialog
    ref="dialogRef"
    title="Edit"
    titleTip="11111"
    @close="close"
    @closed="closed"
    @open="open"
    @opened="opened"
    @open-auto-focus="focus"
    @close-auto-focus="unFocus"
    @confirm="editDialogConfirm"
    top="0"
    center
    fullScreen
  >
    <op-table show-summary></op-table>
    <!-- <el-button>666666666</el-button> -->
  </op-dialog>
</template>

<script setup>
let flex = $ref(1);
const dialogRef = $ref();

onMounted(() => {});

const buttonClick = prop => {
  console.log(prop);
};

function click() {
  dialogRef.init();
  dialogRef.fullScreen = true;
}

const close = () => {
  console.log('close');
};

const closed = () => {
  console.log('closed');
};

function open(params) {
  console.log('open');
}

function opened() {
  console.log('opened');
}

const focus = () => {
  console.log('focus');
};

const unFocus = () => {
  console.log('unFocus');
};

const editDialogConfirm = () => {
  console.log('editDialogConfirm');
};
</script>

<style lang="scss" scoped>
.root {
  box-sizing: border-box;
  background-color: aqua;
  width: 100vw;
  height: 100vh;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .card {
    flex: 1;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    background: #fff;
    overflow: hidden;
    color: #303133;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    padding: 10px 15px;
    position: relative;
    box-sizing: border-box;
    .box {
      display: flex;
      width: 100%;
      height: 100%;
      /* height: 500px; */
    }
  }
}
</style>
